<template>
  <!-- 新建测量单 -->
  <HeaderNavTabarVue :title="title" />
  <view class="measurement-box" :style="'min-height: ' + boxHeight + 'rpx;'">
    <view class="main">
      <view class="main-content-row">
        <view class="picker-content">
          <view class="measurement-info-list">
            <text class="info-list-left isrequired">测量人员</text>
            <view class="info-list-right">
              <view class="info-content">
                {{ measurementList?.businessSurveyorName }}
              </view>
            </view>
          </view>
        </view>
        <view class="picker-content">
          <view class="measurement-info-list">
            <text class="info-list-left isrequired">测量日期</text>
            <view class="info-list-right">
              <view class="info-content">
                {{ measurementList.surveyDate }}
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="main-content-row main-content-row-center">
        <MyPicker @getVlaue="getVlaue" ref="customerPickerRef" popupTitle="请选择客户名称">
          <view class="picker-content" @tap="toggle('customer')">
            <view class="measurement-info-list">
              <text class="info-list-left isrequired">客户名称</text>
              <view class="info-list-right">
                <view v-if="measurementList.customerName" class="uni-input">{{
                  measurementList.customerName
                }}</view>
                <view class="uni-inputs" v-else>请选择</view>
                <i class="iconfont icon-youjiantou"></i>
              </view>
            </view>
          </view>
        </MyPicker>

        <view class="picker-content">
          <view class="measurement-info-list">
            <text class="info-list-left isrequired">终端门店</text>
            <view class="info-list-right">
              <input
                adjust-position
                type="text"
                class="uni-input placeholder-right"
                placeholder="请输入"
                v-model="measurementList.terminalName"
              />
            </view>
          </view>
        </view>
        <view class="picker-content">
          <view class="measurement-info-list">
            <text class="info-list-left isrequired">终端地址</text>
            <view class="info-list-right">
              <input
                adjust-position
                type="text"
                class="uni-input placeholder-right"
                placeholder="请输入"
                v-model="measurementList.detailedAddress"
              />
            </view>
          </view>
        </view>
        <view class="picker-content">
          <view class="measurement-info-list">
            <text class="info-list-left isrequired">终端电话</text>
            <view class="info-list-right">
              <input
                adjust-position
                type="number"
                class="uni-input placeholder-right"
                placeholder="请输入"
                v-model="measurementList.terminalPhone"
              />
            </view>
          </view>
        </view>
        <picker
          @change="shopRadioChange"
          :value="measurementList.shopRadioName"
          :range="shopRadioOption"
          class="picker-content"
        >
          <view class="measurement-info-list">
            <text class="info-list-left isrequired">门店情况</text>
            <view class="info-list-right">
              <view v-if="measurementList.shopRadioName" class="uni-input">{{
                measurementList.shopRadioName
              }}</view>
              <view class="uni-inputs" v-else>请选择</view>
              <i class="iconfont icon-youjiantou"></i>
            </view>
          </view>
        </picker>
        <view class="picker-content" v-if="measurementList.shopRadioName == '其他'">
          <view class="measurement-info-list">
            <text class="info-list-left">其他说明</text>
            <view class="info-list-right">
              <input
                adjust-position
                type="text"
                class="uni-input placeholder-right"
                placeholder="请输入"
                v-model="measurementList.other"
              />
            </view>
          </view>
        </view>

        <view class="picker-content">
          <view class="measurement-info-list">
            <text class="info-list-left isrequired">门店离地高度</text>
            <view class="info-list-right">
              <input
                adjust-position
                type="number"
                class="uni-input placeholder-right"
                placeholder="请输入"
                v-model="measurementList.shopEnvironment"
              />
              <text class="unit">m</text>
            </view>
          </view>
        </view>
        <view class="picker-content">
          <view class="measurement-info-list">
            <text class="info-list-left isrequired">主线到招牌距离</text>
            <view class="info-list-right">
              <input
                adjust-position
                type="number"
                class="uni-input placeholder-right"
                placeholder="请输入"
                v-model="measurementList.mainLineDistance"
              />
              <text class="unit">m</text>
            </view>
          </view>
        </view>
        <view class="picker-content">
          <view class="measurement-info-list">
            <text class="info-list-left">门店备注</text>
            <view class="info-list-right">
              <input
                adjust-position
                type="text"
                class="uni-input placeholder-right"
                placeholder="请输入"
                v-model="measurementList.terminalRemark"
              />
            </view>
          </view>
        </view>
      </view>
      <view class="main-content-row">
        <picker
          @change="urbanManagementReportChange"
          :value="measurementList.urbanManagementReport"
          :range="urbanManagementReportOption"
          class="picker-content"
        >
          <view class="measurement-info-list">
            <text class="info-list-left isrequired">城管报备情况</text>
            <view class="info-list-right">
              <view v-if="measurementList.urbanManagementReport" class="uni-input">{{
                measurementList.urbanManagementReport
              }}</view>
              <view class="uni-inputs" v-else>请选择</view>
              <i class="iconfont icon-youjiantou"></i>
            </view>
          </view>
        </picker>

        <view class="picker-content">
          <view class="measurement-info-list">
            <text class="info-list-left isrequired">设计元素</text>
            <view class="info-list-right">
              <view class="info-content">
                <input
                  adjust-position
                  type="text"
                  class="uni-input placeholder-right"
                  placeholder="请输入"
                  v-model="measurementList.designElements"
                />
              </view>
            </view>
          </view>
        </view>

        <view class="picker-content">
          <view class="measurement-info-list">
            <text class="info-list-left isrequired">厂家负责人</text>
            <view class="info-list-right">
              <view class="info-content">
                <input
                  adjust-position
                  type="text"
                  class="uni-input placeholder-right"
                  placeholder="请输入"
                  v-model="measurementList.manufacturerContact"
                />
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="floor">
      <button class="go-material" @tap="goMaterial">
        <p>下一步</p>
        <text>填写生动化数据</text>
      </button>
      <button class="go-modelName" @tap="goModelName">
        <p>下一步</p>
        <text>填写结构图数据</text>
      </button>
    </view>
  </view>
</template>

<script setup>
import HeaderNavTabarVue from '@/components/HeaderNavTabar/HeaderNavTabar.vue'
import MyPicker from '@/components/MyPicker/MyPicker.vue'
import store from '@/store'
import { onLoad } from '@dcloudio/uni-app'

import { getWorkApi, getListTeamsApi } from '@/api/customer.js'
import { getUserProfile } from '@/api/system/user.js'

import { getTitleBarHeight } from '@/utils/system.js'
import { getDate } from '@/utils/getDate.js'
import { ref, reactive, computed } from 'vue'
const isEdit = ref('')
const title = ref('新建测量单 - 客户数据')
const customerPickerRef = ref(null)
const installerPickerRef = ref(null)
// 页面内容高度
const boxHeight = (uni.getSystemInfoSync().windowHeight - getTitleBarHeight()) * 2

const startDate = computed(() => {
  return getDate('start')
})
const endDate = computed(() => {
  return getDate('end')
})
let userInfo = ref(null)
let measurementList = reactive({
  businessSurveyor: null, // 测量人员
  businessSurveyorName: null, // 测量人员
  surveyDate: getDate(), // 测量日期
  customerId: '', // 客户名称
  customerName: '', // 客户名称
  terminalName: '', // 终端门店
  detailedAddress: '', // 终端地址
  terminalPhone: '', // 终端电话
  shopRadio: '1', // 门店情况
  shopRadioName: '已有店面改造', // 门店情况
  other: '', // 其他
  shopEnvironment: '', // 门头离地高度
  mainLineDistance: '', // 主线到招牌距离

  terminalRemark: '', // 门店备注

  urbanManagementReport: '', // 城管报备情况
  designElements: '', // 设计元素
  // installer: "", // 安装队
  // installerName: "", // 安装队
  manufacturerContact: '', // 厂家负责人
})

let businessSurveyorOptions = ref(['中国', '美国', '巴西', '日本'])
let shopRadioOption = ref(['新开店', '已有店面改造', '其他'])
let urbanManagementReportOption = ref(['报备', '未报备', '无需报备', '其他'])

// 打开模态床
const toggle = (name) => {
  if (name == 'customer') {
    store.commit('setCustomerList', customerList.value)
    customerPickerRef.value.toggle('bottom') // 调用子组件的 show 方法
  } else if (name == 'installer') {
    store.commit('setCustomerList', listTeamsList.value)
    installerPickerRef.value.toggle('bottom') // 调用子组件的 show 方法
  }
}
// 客户信息
let customerList = ref([])

let listTeamsList = ref([])
// 获取客户下拉菜单数据
const getWorkApiData = async (v = '') => {
  let params = {
    customerName: v,
    pageSize: 20,
  }
  let { code, data } = await getWorkApi(params)
  if (code == 200) {
    data.forEach((v) => {
      // customerList.value.push({
      //   label:  v.primaryClassification+'/'+ v.customerName,
      //   value: v.customerId,
      // })
      // 过滤掉 null
      customerList.value.push({
        label: [v.primaryClassification, v.customerName].filter((item) => item != null).join('/'),
        value: v.customerId,
      })
    })
  }
}

// 选择的客户数据
const getVlaue = (v) => {
  measurementList.customerId = v.value
  measurementList.customerName = v.label
  customerPickerRef.value.closePop()
}

// 选择门店情况
const shopRadioChange = (e) => {
  measurementList.shopRadio = new String(e.detail.value)
  measurementList.shopRadioName = shopRadioOption.value[e.detail.value]
}
const urbanManagementReportChange = (e) => {
  measurementList.urbanManagementReport = urbanManagementReportOption.value[e.detail.value]
}

// 普通选择
const bindPickerChange = (e) => {
  measurementList.businessSurveyorList = e.detail.value
}

const bindDateChange = (e) => {
  measurementList.surveyDate = e.detail.value
}

let reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
const jiaoyan = (fn) => {
  let obj = {
    customerId: '', // 客户名称
    customerName: '', // 客户名称
    terminalName: '', // 终端门店
    detailedAddress: '', // 终端地址
    terminalPhone: '', // 终端电话
    shopEnvironment: '', // 门头离地高度
    mainLineDistance: '', // 主线到招牌距离
    urbanManagementReport: '', // 城管报备情况
    designElements: '', // 设计元素
    manufacturerContact: '', // 厂家负责人
  }
  let nameTypeEL = []
  if (measurementList.shopRadioName == '其他') {
    obj.other = ''
  }

  for (let key in obj) {
    if (measurementList[key] == '') {
      nameTypeEL.push(key)
    }
  }

  if (nameTypeEL.length == 0) {
    if (!reg_tel.test(measurementList.terminalPhone)) {
      uni.showToast({
        title: '手机号码格式错误！',
        icon: 'none',
      })
    } else {
      fn()
    }
  } else {
    uni.showToast({
      title: '请输入完整数据',
      icon: 'error',
    })
  }
}

// 前往生动化测量
const goMaterial = () => {
  const fn = () => {
    uni.navigateTo({
      url: `/pages/measurement/material/material?sss=${encodeURIComponent(
        JSON.stringify(measurementList),
      )}&isEdit=${isEdit.value}`,
    })
  }
  jiaoyan(fn)
}

// 前往结构模板
const goModelName = () => {
  console.log(isEdit.value, '000')
  const fn = () => {
    uni.navigateTo({
      url: `/pages/measurement/modelView/modelView?sss=${encodeURIComponent(
        JSON.stringify(measurementList),
      )}&isEdit=${isEdit.value}`,
    })
  }
  jiaoyan(fn)
}

const getUserProfileFn = async () => {
  let { code, data } = await getUserProfile()
  if (code == 200) {
    userInfo.value = data
    // 问题1userInfo
    measurementList.businessSurveyor = new String(userInfo.value.userId)
    measurementList.businessSurveyorName = userInfo.value.nickName
  }
}

onLoad((options) => {
  Promise.all([getWorkApiData(), getUserProfileFn()])
  // console.log(JSON.parse(decodeURIComponent(options.data)), 'options ')
  if (options.isEdit) {
    //   编辑/详情
    title.value = JSON.parse(options.isEdit.toLowerCase())
      ? '编辑测量单 - 客户数据'
      : '查看测量单 - 客户数据'
    isEdit.value = JSON.parse(options.isEdit.toLowerCase()) // true 编辑 false 详情
    measurementList = JSON.parse(decodeURIComponent(options.data))
    //   门店情况
    measurementList.shopRadio = new String(measurementList.shopRadio)
    measurementList.shopRadioName = shopRadioOption.value[measurementList.shopRadio]
  }
})
</script>
<style lang="scss">
@import '/static/style/index.scss';

.measurement-box {
  // @include main-area-bgColor;
  background-color: $uni-bai;
  padding: $spacing-row-base;
  box-sizing: border-box;
  overflow-y: auto;

  :deep(.uni-input-input) {
    text-align: right;
  }

  .main {
    .main-content-row-center {
      margin: $spacing-col-base 0;
    }

    .main-content-row {
      // @include background-color;
      background-color: $uni-bg-lin;
      border-radius: 16rpx;

      .measurement-info-list {
        @include flex($align: center, $justify: space-between);
        padding: $spacing-row-base;

        .info-list-left {
          // @include font-color-auxiliary;
          color: $uni-fc-fu-lin;
          font-size: $font-size-base;
        }

        .info-list-right {
          @include flex($align: center);

          .info-content {
            @include textStyleBase;
            font-size: 34rpx;
          }

          .iconfont {
            margin-left: 16rpx;
            // @include font-color-auxiliary;
            color: $uni-fc-fu-lin;
          }
        }

        .unit {
          // @include font-color-auxiliary;
          color: $uni-fc-fu-lin;
        }
      }
    }

    .main-content-bottom {
      margin-top: $spacing-col-base;
    }
  }

  .floor {
    width: 100%;
    @include flex($align: cneter, $justify: space-between);
    margin-top: 40rpx;

    button {
      width: 335rpx;
      height: 104rpx;
      @include flex($align: center, $flex-column: column);
      line-height: normal;
      padding: 14rpx 0;
      box-sizing: border-box;

      p {
        font-size: 30rpx;
      }

      text {
        font-size: 24rpx;
      }
    }

    .go-material {
      background-color: $btn-bg-color-2;
      border: 1px solid $btn-bg-color;

      p {
        color: $text-color;
      }

      text {
        color: $text-color-auxiliary;
      }
    }

    .go-modelName {
      background-color: $btn-bg-color;

      p {
        color: $text-color-white;
      }

      text {
        color: $text-btn-color;
      }
    }
  }
}
</style>
